<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>SimpleMall Index</title>
    <link type="text/css" rel="stylesheet" href="css/base.css" />
    <link type="text/css" rel="stylesheet" href="css/swiper.min.css" />
    <link type="text/css" rel="stylesheet" href="css/destine.css" />
    <script src="js/vue.min.js" type="text/javascript"></script>
    <script src="js/vue-resource.min.js" type="text/javascript"></script>
    <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="js/api.js" type="text/javascript"></script>
    <script src="js/swiper.min.js" type="text/javascript"></script>

</head>
<body>
<div id="app">
  <div class="bg-white">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item, index) in photoShow" :key="index">
              <img :src="item" @click="bigShow(item)" />
            </div>
        </div>
        <!-- 如果需要分页器 --></div>
        <div class="swiper-pagination">
    </div>
    <div class="user-info fd-re">
       <h3 class="user-name fs36 fd-thick">{{detalData.nick}}</h3>
       <p class="pt06 user-mark"><span class="pr04">{{detalData.age | ageFilter}}岁</span>  <span>{{detalData.address}}</span></p>
       <a class="user-dialog fd-ab fs20 fd-tc" @click="sendMessage()">发消息</a>
    </div>
  </div>
    <div class="user-box">
        <div class="user-module">
            <div class="title f32"><h2 class="fd-thick">内心独白</h2></div>
            <div class="user-profile">
                <p>{{detalData.signature}}</p>
            </div>
        </div>

        <div class="user-module">
            <div class="title f32"><h2 class="fd-thick">个人资料</h2></div>
            <div class="user-profile">
              <span>{{detalData.marriage}}</span><span>{{detalData.height}}cm</span><span>月收入:{{detalData.salary}}</span>
              <span>{{detalData.education}}</span>
            </div>
        </div>

        <div class="user-module">
            <div class="title f32"><h2 class="fd-thick">择偶标准</h2></div>
            <div class="user-profile">
                <span>{{detalData.marriage}}</span><span>{{detalData.height}}cm</span><span>月收入:{{detalData.salary}}</span>
                <span>{{detalData.education}}</span>
            </div>
        </div>

    </div>
    <div class="bullet-box" v-if="bigHide" @click="hideImg" :style="'background-image:url('+jsImg+')'"></div>
</div>
<script type="text/javascript">
var app = new Vue({
   el: '#app',
   data: {
     detalData: [],
     photoShow: [],
     bigHide: false,
     jsImg:''
   },
   created:function () {
      this.fetach();
   },
   updated:function(){
       this.mySwiper();
   },
   methods: {
     fetach:function () {
       var tid = location.href.split('=')[1];
       this.$http.post(api.ip + '/acc/detail',{
           tid: tid,
           accessToken: localStorage.getItem('token'),
           userId: localStorage.getItem('userId')
       },{emulateJSON : true}).then(function (value) {
           if(value != undefined){
               this.detalData = value.body.respData;
               this.photoShow = value.body.respData.photo_show.split(',');
               console.log(this.detalData);
           }else {
               return false;
           }

       },function (reason) {
           console.log(reason)
       })
     },
     mySwiper: function () {
         new Swiper ('.swiper-container', {
             direction: 'horizontal', // 垂直切换选项

             // 如果需要分页器
             pagination: {
                 el: '.swiper-pagination',
             }
         })
     },
     bigShow: function (e) {
       this.jsImg = e;
       this.bigHide = true;
     },
     hideImg: function () {
       this.bigHide = false;
     },
     sendMessage:function () {
         location.href = 'im.html';
     }
   },
   filters:{
       ageFilter:function (e) {
           if(e == undefined){
               return 22;
           }else{
               var dates = new Date();
               var years = dates.getFullYear();
               var ages = e.split('-')[0];
               return (years - ages);
           }
       }
   }
})

</script>
</body>
</html>